@@include('header.htm', {
  "title": "List Group - Sleek Admin Dashboard Template",

	"vector_map": "",

	"date_range_picker": "",

	"select2": "",

	"ladda": "",

	"toastr": "",

	"flag_icon": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",

	"data_table": "",

	"responsive_data_table": "",

	"expendable_data_table": ""
})

@@include('sidebar.htm', {
	"parent": "components",
	"sub_parent": "components",
	"active": "list-group"
})

@@include('top-bar.htm')




<div class="breadcrumb-wrapper">
	<h1>List Group</h1>

	@@include('breadcrumb.htm', {
		"parent": "components",
		"sub_parent": "components",
		"active": "list-group"
	})
</div>

<div class="row">
	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header justify-content-between align-items-center card-header-border-bottom">
				<h2>Latest Notifications</h2>
				<div>

					<button class="text-black-50 mr-2 font-size-20"><i class="mdi mdi-cached"></i></button>
					<div class="dropdown show d-inline-block widget-dropdown">
						<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
						<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-notification">
							<li class="dropdown-item"><a href="#">Action</a></li>
							<li class="dropdown-item"><a href="#">Another action</a></li>
							<li class="dropdown-item"><a href="#">Something else here</a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="card-body" data-simplebar style="height: 527px;">
				<div class="media py-3 align-items-center justify-content-between">
					<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
						<i class="mdi mdi-cart-outline font-size-20"></i>
					</div>

					<div class="media-body pr-3 ">
						<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Order</a>
						<p >Selena has placed an new order</p>
					</div>

					<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
				</div>

				<div class="media py-3 align-items-center justify-content-between">
					<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
						<i class="mdi mdi-email-outline font-size-20"></i>
					</div>

					<div class="media-body pr-3">
						<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
						<p >Phileine has placed an new order</p>
					</div>

					<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
				</div>

				<div class="media py-3 align-items-center justify-content-between">
					<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
						<i class="mdi mdi-stack-exchange font-size-20"></i>
					</div>

					<div class="media-body pr-3">
						<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
						<p >Emma has placed an new order</p>
					</div>

					<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
				</div>

				<div class="media py-3 align-items-center justify-content-between">
					<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-primary text-white">
						<i class="mdi mdi-cart-outline font-size-20"></i>
					</div>

					<div class="media-body pr-3">
						<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New order</a>
						<p >Ryan has placed an new order</p>
					</div>

					<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
				</div>

				<div class="media py-3 align-items-center justify-content-between">
					<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-info text-white">
						<i class="mdi mdi-calendar-blank font-size-20"></i>
					</div>

					<div class="media-body pr-3">
						<a class="mt-0 mb-1 font-size-15 text-dark" href="">Comapny Meetup</a>
						<p >Phileine has placed an new order</p>
					</div>

					<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
				</div>

				<div class="media py-3 align-items-center justify-content-between">
					<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-warning text-white">
						<i class="mdi mdi-stack-exchange font-size-20"></i>
					</div>

					<div class="media-body pr-3">
						<a class="mt-0 mb-1 font-size-15 text-dark" href="#">Support Ticket</a>
						<p >Emma has placed an new order</p>
					</div>

					<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 10 AM</span>
				</div>

				<div class="media py-3 align-items-center justify-content-between">
					<div class="d-flex rounded-circle align-items-center justify-content-center mr-3 media-icon iconbox-45 bg-success text-white">
						<i class="mdi mdi-email-outline font-size-20"></i>
					</div>

					<div class="media-body pr-3">
						<a class="mt-0 mb-1 font-size-15 text-dark" href="#">New Enquiry</a>
						<p >Phileine has placed an new order</p>
					</div>
					<span class=" font-size-12 d-inline-block"><i class="mdi mdi-clock-outline"></i> 9 AM</span>
				</div>
			</div>

			<div class="mt-3"></div>
		</div>
	</div>

	<div class="col-lg-6">
		<!-- To Do list -->
		<div class="card card-default todo-table" id="todo">
			<div class="card-header justify-content-between align-items-center card-header-border-bottom">
				<h2>To Do List</h2>
				<div>

					<button class="text-black-50 mr-2 font-size-20"><i class="mdi mdi-cached"></i></button>
					<div class="dropdown show d-inline-block widget-dropdown">
						<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-notification" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
						<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-notification">
							<li class="dropdown-item"><a href="#">Action</a></li>
							<li class="dropdown-item"><a href="#">Another action</a></li>
							<li class="dropdown-item"><a href="#">Something else here</a></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="card-body compact-to-do-list p-0">
				<div class="card border-0">
					<div class="card-header d-block pb-0 ">
						<div class="todo-single-item mb-0" id="todo-input">
							<form class="todo-form">
								<div class="input-group mb-0">
									<input type="text" class="form-control border-right-0" placeholder="Add Todo" required="" autofocus>
									<div class="input-group-append ml-0">
										<button class="input-group-text border-0 btn bg-primary" type="submit">
											<?xml version="1.0"?>
											<svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 0 448 448" width="18" class="">
												<g><path d="m408 184h-136c-4.417969 0-8-3.582031-8-8v-136c0-22.089844-17.910156-40-40-40s-40 17.910156-40 40v136c0 4.417969-3.582031 8-8 8h-136c-22.089844 0-40 17.910156-40 40s17.910156 40 40 40h136c4.417969 0 8 3.582031 8 8v136c0 22.089844 17.910156 40 40 40s40-17.910156 40-40v-136c0-4.417969 3.582031-8 8-8h136c22.089844 0 40-17.910156 40-40s-17.910156-40-40-40zm0 0" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>
												</g>
											</svg>
										</button>
									</div>
								</div>
							</form>
						</div>
					</div>

					<div class="card-body" data-simplebar style="height: 435px;">
						<div class="todo-list" id="todo-list" >
							<div id="item" class="todo-single-item todo-item d-flex flex-row justify-content-between finished alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Finish Dashboard UI Kit update</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
		
							<div class="todo-single-item d-flex flex-row justify-content-between current alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Create new prototype for the landing page</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
		
							<div class="todo-single-item d-flex flex-row justify-content-between alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Add new Google Analytics code to all main files sed auctor lacus in sem interdum, ac gravida tortor elementum. Cras magna enim.</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
		
							<div class="todo-single-item d-flex flex-row justify-content-between alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Update parallax scroll on team page</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
		
							<div class="todo-single-item d-flex flex-row justify-content-between alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Integer et porta odio, pulvinar pretium eros. Curabitur vel tellus erat.</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
		
							<div class="todo-single-item d-flex flex-row justify-content-between alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Pellentesque blandit ut eros sed vehicula.</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
		
							<div class="todo-single-item d-flex flex-row justify-content-between alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis ligula, fringilla in volutpat sit amet, viverra nec mi. Donec at dui dolor.</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
		
							<div class="todo-single-item d-flex flex-row justify-content-between mb-1 alert alert-dismissible fade show" role="alert">
								<i class="mdi"></i>
								<span>Update parallax scroll on team page</span>
		
								<div class="task-content">
									<span data-dismiss="alert" aria-label="Close">
										<svg class="remove-task" id="Capa_1" enable-background="new 0 0 515.556 515.556" height="16" viewBox="0 0 515.556 515.556" width="16" xmlns="http://www.w3.org/2000/svg"><path class="" d="m64.444 451.111c0 35.526 28.902 64.444 64.444 64.444h257.778c35.542 0 64.444-28.918 64.444-64.444v-322.222h-386.666z"/><path d="m322.222 32.222v-32.222h-128.889v32.222h-161.111v64.444h451.111v-64.444z"/></svg>
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="mt-3"></div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Basic List </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within. Read bootstrap documentaion for <a href="https://getbootstrap.com/docs/4.6/components/list-group/#basic-example" target="_blank"> more details.</a></p>

				<ul class="list-group">
					<li class="list-group-item text-dark">Cras justo odio</li>
					<li class="list-group-item text-dark">Dapibus ac facilisis in</li>
					<li class="list-group-item text-dark">Morbi leo risus</li>
					<li class="list-group-item text-dark">Porta ac consectetur ac</li>
					<li class="list-group-item text-dark">Vestibulum at eros</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Links and Buttons </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Use &lt;a&gt;s or &lt;button&gt;s to create actionable list group items with hover, disabled, and active states by adding .list-group-item-action. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.6/components/list-group/#links-and-buttons" target="_blank"> more details.</a></p>

				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action active">Cras justo odio</a>
					<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
					<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
					<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
					<a href="#" class="list-group-item list-group-item-action disabled">Vestibulum at eros</a>
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Contextual Classes List</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Use contextual classes to style list items with a stateful background and color. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.6/components/list-group/#contextual-classes" target="_blank"> more details.</a></p>

				<ul class="list-group">
					<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>
					<li class="list-group-item list-group-item-success">This is a success list group item</li>
					<li class="list-group-item list-group-item-danger">This is a danger list group item</li>
					<li class="list-group-item list-group-item-warning">This is a warning list group item</li>
					<li class="list-group-item list-group-item-info">This is a info list group item</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2> With Badges </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add badges to any list group item to show unread counts, activity, and more. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.6/components/list-group/#with-badges" target="_blank"> more details.</a></p>

				<ul class="list-group">
					<li class="list-group-item d-flex justify-content-between align-items-center">
						Cras justo odio
						<span class="badge badge-primary badge-pill">14</span>
					</li>

					<li class="list-group-item d-flex justify-content-between align-items-center">
						Dapibus ac facilisis in
						<span class="badge badge-primary badge-pill">2</span>
					</li>

					<li class="list-group-item d-flex justify-content-between align-items-center">
						Morbi leo risus
						<span class="badge badge-primary badge-pill">24</span>
					</li>

					<li class="list-group-item d-flex justify-content-between align-items-center">
						Porta ac consectetur ac
						<span class="badge badge-primary badge-pill">6</span>
					</li>

					<li class="list-group-item d-flex justify-content-between align-items-center">
						Vestibulum at eros
						<span class="badge badge-primary badge-pill">6</span>
					</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Desable List</h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add <code>.disabled</code> to a <code>.list-group-item</code> to make it appear disabled. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.6/components/list-group/#disabled-items" target="_blank"> more details.</a></p>

				<ul class="list-group">
					<li class="list-group-item disabled">Cras justo odio</li>
					<li class="list-group-item text-dark">Dapibus ac facilisis in</li>
					<li class="list-group-item text-dark">Morbi leo risus</li>
					<li class="list-group-item text-dark">Porta ac consectetur ac</li>
					<li class="list-group-item text-dark">Vestibulum at eros</li>
				</ul>
			</div>
		</div>
	</div>

	<div class="col-lg-6">
		<div class="card card-default">
			<div class="card-header card-header-border-bottom">
				<h2>Custom Content </h2>
			</div>

			<div class="card-body">
				<p class="mb-5">Add nearly any HTML within, even for linked list groups like the one below, with the help of flexbox utilities. Read bootstrap documentaion for<a href="https://getbootstrap.com/docs/4.6/components/list-group/#custom-content"
						target="_blank"> more details.</a></p>

				<div class="list-group">
					<a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
						<div class="d-flex w-100 justify-content-between">
							<h5 class="mb-1">List group item heading</h5>
							<small>3 days ago</small>
						</div>

						<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
						<small>Donec id elit non mi porta.</small>
					</a>

					<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
						<div class="d-flex w-100 justify-content-between">
							<h5 class="mb-1">List group item heading</h5>
							<small class="text-muted">3 days ago</small>
						</div>

						<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
						<small class="text-muted">Donec id elit non mi porta.</small>
					</a>

					<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
						<div class="d-flex w-100 justify-content-between">
							<h5 class="mb-1">List group item heading</h5>
							<small class="text-muted">3 days ago</small>
						</div>

						<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
						<small class="text-muted">Donec id elit non mi porta.</small>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>




@@include('footer.htm', {

	"chart_js": "",
	"chartjs": "",

	"google_map": "",
	"mapjs": "",

	"vector_map": "",
	"vector_map_world_mill": "",
	"vector_map_js": "",
	
	"date_range_picker_moment": "",
	"date_range_picker": "",
	"date_range_js": "",

	"select2": "",

	"ladda_spin": "",
	"ladda": "",

	"jquery_mask": "",

	"toastr": "",

	"circle_progress": "",

	"full_calendar_core": "",
	"full_calendar_daygrid": "",
	"full_calendar_js": "",

	"data_table": "",
	"data_table_bootstrap4": "",

	"responsive_data_table": ""
})
